<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clip属性</title>
</head>
<style>
    
    *{
        padding: 0;
        margin: 0;
    }
    ul>li{
        list-style-type: none ;
    }
    .imgList{
        position: absolute;
        bottom: 0;
        display: flex;
        flex-wrap: wrap;
        z-index: 2;
    }
    .imgList li{
        flex: 1;
        min-width: 250px;
        text-align: center;
    }
    .imgList li img{
        width: 80%;
        height: 300px;
        object-fit: cover;
    }
    .bg>li{
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        background: url("https://www.jq22.com/demo/jqueryqplbt202206070124/img/bg0.jpg") no-repeat 100% 100%;
        background-size: cover;
        /* 起始样式 */
        clip: rect(104px, 1068px, 424px, 853px);
        opacity: 0;
        z-index: 0;
        transition: clip .3s;
    }
    .bg>.city{
        clip:rect(0,100vw,100vh,0);
        opacity: 1;
    }
</style>
<body>
    <ul class="imgList">
        <li>
            <img src="https://www.jq22.com/demo/jqueryqplbt202206070124/img/bg0.jpg">
        </li>
        <li>
            <img src="https://www.jq22.com/demo/jqueryqplbt202206070124/img/bg1.jpg">
        </li>
        <li>
            <img src="https://www.jq22.com/demo/jqueryqplbt202206070124/img/bg2.jpg">
        </li>
        <li>
            <img src="https://www.jq22.com/demo/jqueryqplbt202206070124/img/bg3.jpg">
        </li>
        <li>
            <img src="https://www.jq22.com/demo/jqueryqplbt202206070124/img/bg4.jpg">
        </li>
        <li>
            <img src="https://www.jq22.com/demo/jqueryqplbt202206070124/img/bg5.jpg">
        </li>
    </ul>
    <div class="bg">
        
    </div>
</body>
</html>

<script>
    //构造函数 不会污染全局
    function Pclp(){
        let list = document.querySelectorAll(".imgList>li")
        let bg = document.querySelector(".bg")
        // 循环li 并渲染
        this.forli = function(){
            for(var i = 0;i<list.length; i++){
                var li = document.createElement("li")
                bg.append(li)
            }
        }
        // 清楚样式
        this.clearClass = function(){
            for (const key in Array.from(bg.children)) {
                bg.children[key].classList.remove("city")
            }
        }
        //初始化
        this.init = function(){
            //初始化第几张图
            let index = 5
            console.log(bg.children)
            bg.children[index].style.cssText = `background:url(${ list[index].children[0].src }) no-repeat;background-size: cover`
            bg.children[index].classList.add("city")
        }
        //处理
        this.getdata = function(){
            let that = this
            that.forli()
            that.init()
            Array.from(list).forEach((item,index)=>{
                item.onclick = function(){
                    that.clearClass()
                    bg.children[index].style.cssText = `background:url(${ item.children[0].src }) no-repeat;background-size: cover`
                    bg.children[index].classList.add("city")
                }
            })
        }
    }
    new Pclp().getdata()
</script>